<template>
    <div style="padding:50px;">

        <Divider>
            <Button @click="addRow">Add Row</Button>
        </Divider>

        <Table ref="myTable" border :columns="columns" :data="data">
            <template slot="name" slot-scope="props">
                <Form :ref="'formDynamic'+props.idx" :model="props.row">
                    <FormItem prop="name" :rules="{required: true, message: '请输入称呼', trigger: 'blur'}">
                        <Input v-model="props.row.name" size="small"></Input>
                    </FormItem>
                </Form>
            </template>

            <template slot="date" slot-scope="props">
                <DatePicker v-model="props.row.date" type="date" placeholder="Select date" style="width: 140px"></DatePicker>
            </template>

            <!-- 操作 -->
            <template slot="action" slot-scope="props">
                <Poptip @on-ok="delRow(props.idx)" confirm title="Delete this item?" transfer>
                    <Button type="warning" size="small">删除</Button>
                </Poptip>
            </template>
        </Table>

        <div style="text-align:right;padding:8px 0;">
            <Button type="primary" @click="checkData">Check Data</Button>
        </div>

        <Divider>
            data
        </Divider>
        {{data}}

        <div style="display:none;"> {{act}}</div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                act: false, // 用于触发渲染
                formDynamic: {},
                data: [],
                columns: [
                    {
                        title: '称呼',
                        key: 'name',
                        render: (h, params) => {
                            this.data[params.index] = params.row
                            return h(
                                'div',
                                this.$refs.myTable.$scopedSlots.name({
                                    row: params.row,
                                    idx: params.row._index
                                })
                            )
                        }
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    },
                    {
                        title: '日期',
                        key: 'date',
                        render: (h, params) => {
                            this.data[params.index] = params.row
                            return h(
                                'div',
                                this.$refs.myTable.$scopedSlots.date({
                                    row: params.row,
                                    idx: params.row._index
                                })
                            )
                        }
                    },
                    {
                        title: '地址',
                        key: 'address'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            return h(
                                'div',
                                this.$refs.myTable.$scopedSlots.action({
                                    idx: params.row._index
                                })
                            )
                        }
                    }
                ]
            }
        },
        methods: {
            checkData() {
                console.log('checkData', this.$refs)

                for (let i = 0, len = this.data.length; i < len; i++) {
                    this.$refs['formDynamic' + i].validate(valid => {
                        if (valid) {
                            // this.$Message.success('Success!')
                        } else {
                            // this.$Message.error('Fail!')
                        }
                    })
                }
            },
            /** 删除行 */
            delRow(idx) {
                this.data.splice(idx, 1)
                this.$nextTick(() => {
                    this.act = !this.act
                })
            },
            /** 添加行 */
            addRow() {
                this.data.push({
                    name: '',
                    age: 18,
                    date: '',
                    address: 'Beijing'
                })

                this.$nextTick(() => {
                    this.act = !this.act
                })
            }
        },
        mounted() {
            this.addRow()
        }
    }
</script>
<style>
</style>